<template>
  <section>
    DPlayerDemo
    <d-player
      ref="player"
      :options="options"
      class="d-player"/>
    <el-button @click="getPlayer">打印player</el-button>
  </section>
</template>

<script>
import VueDPlayer from 'vue-dplayer'
import flvjs from '../assets/flv.min.js'
import 'vue-dplayer/dist/vue-dplayer.css'

export default {
  name: "DPlayerDemo",
  components: {
    'd-player': VueDPlayer
  },
  data() {
    return {
      options:{
        video:{
          // url:'http://192.168.28.121:3333/video/18812341234,2,1,1',
          url:'http://192.168.1.60:6618/rtmp/ttxplayer/1608858338656/?OTE5QjhCQTUzM0JERkFCQUQzQTI0QTM2QkRFMDlDNUQsMSwwMTg4MTIzNDEyMzQsMSwxLDAsMA==',
          // type:'flv,'
          type: 'customFlv',
          customType: {
            customFlv: function (video, player) {
              const flvPlayer = flvjs.createPlayer({
                cors: true,
                type: 'flv',
                isLive: true,
                hasAudio: false,
                hasVideo: true,
                url: video.src,
                withCredentials: false,
                segments:[{
                  cors: true,
                  timestampBase: 0,
                  withCredentials: false,
                  url: video.src,
                }]
              },{
                enableWorker: false,
                lazyLoadMaxDuration: 3 * 60,
                seekType: 'range',
                enableStashBuffer: false,
                autoFastForward: true,
              });
              flvPlayer.attachMediaElement(video);
              flvPlayer.load();
            }
          }
        },
        live: true,
        autoplay: true,
        screenshot: true,
        // preload: 'none'
      }
    }
  },
  methods:{
    getPlayer() {
      console.log(this.$refs.player);
    }
  }
}
</script>

<style lang="scss" scoped>
.d-player{
  width: 800px;
  height: 450px;
}
</style>